<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>今日打卡</span>
    </div>
    <div v-loading="loading">
      <div class="attendance-status">
        <div class="time-display">{{ currentTime }}</div>
        <div class="date-display">{{ currentDate }}</div>
        
        <div class="clock-status" v-if="!todayData">
          <el-button type="primary" @click="handleClockIn" :disabled="!hasClockPermission">签到</el-button>
          <div class="status-text">您今天还未签到</div>
        </div>
        
        <div class="clock-status" v-else-if="todayData && todayData.clockInTime && !todayData.clockOutTime">
          <div class="status-info">
            <div class="status-label">签到时间:</div>
            <div class="status-value">{{ todayData.clockInTime }}</div>
          </div>
          <div class="status-info">
            <div class="status-label">签到地点:</div>
            <div class="status-value">{{ todayData.clockInLocation }}</div>
          </div>
          <el-button type="info" @click="handleClockOut" :disabled="!hasClockPermission">签退</el-button>
          <div class="status-text">您已签到，请记得签退</div>
        </div>
        
        <div class="clock-status" v-else>
          <div class="status-info">
            <div class="status-label">签到时间:</div>
            <div class="status-value">{{ todayData.clockInTime }}</div>
          </div>
          <div class="status-info">
            <div class="status-label">签到地点:</div>
            <div class="status-value">{{ todayData.clockInLocation }}</div>
          </div>
          <div class="status-info">
            <div class="status-label">签退时间:</div>
            <div class="status-value">{{ todayData.clockOutTime }}</div>
          </div>
          <div class="status-info">
            <div class="status-label">签退地点:</div>
            <div class="status-value">{{ todayData.clockOutLocation }}</div>
          </div>
          <div class="status-text">今日打卡已完成</div>
        </div>
      </div>
    </div>
    
    <!-- 签到对话框 -->
    <el-dialog title="签到" :visible.sync="clockInOpen" width="500px" append-to-body>
      <el-form ref="clockInForm" :model="clockInForm" :rules="clockInRules" label-width="80px">
        <el-form-item label="签到地点" prop="clockInLocation">
          <el-input v-model="clockInForm.clockInLocation" placeholder="请输入签到地点" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="clockInForm.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitClockIn">确 定</el-button>
        <el-button @click="cancelClockIn">取 消</el-button>
      </div>
    </el-dialog>
    
    <!-- 签退对话框 -->
    <el-dialog title="签退" :visible.sync="clockOutOpen" width="500px" append-to-body>
      <el-form ref="clockOutForm" :model="clockOutForm" :rules="clockOutRules" label-width="80px">
        <el-form-item label="签退地点" prop="clockOutLocation">
          <el-input v-model="clockOutForm.clockOutLocation" placeholder="请输入签退地点" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="clockOutForm.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitClockOut">确 定</el-button>
        <el-button @click="cancelClockOut">取 消</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { getTodayStatus, clockIn, clockOut } from "@/api/system/attendance";
import { parseTime } from '@/utils/ruoyi';

export default {
  name: "AttendanceCard",
  data() {
    return {
      loading: false,
      todayData: null,
      currentTime: '',
      currentDate: '',
      timer: null,
      // 是否显示签到弹出层
      clockInOpen: false,
      // 是否显示签退弹出层
      clockOutOpen: false,
      // 签到表单参数
      clockInForm: {
        clockInLocation: "",
        remark: ""
      },
      // 签退表单参数
      clockOutForm: {
        clockOutLocation: "",
        remark: ""
      },
      // 签到表单校验
      clockInRules: {
        clockInLocation: [
          { required: true, message: "签到地点不能为空", trigger: "blur" }
        ]
      },
      // 签退表单校验
      clockOutRules: {
        clockOutLocation: [
          { required: true, message: "签退地点不能为空", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    hasClockPermission() {
      return this.$store.getters.permissions.includes('system:attendance:clock');
    }
  },
  created() {
    this.updateDateTime();
    this.timer = setInterval(this.updateDateTime, 1000);
    this.getTodayAttendance();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    updateDateTime() {
      const now = new Date();
      this.currentTime = parseTime(now, '{h}:{i}:{s}');
      this.currentDate = parseTime(now, '{y}年{m}月{d}日');
    },
    getTodayAttendance() {
      this.loading = true;
      getTodayStatus().then(response => {
        this.todayData = response.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    handleClockIn() {
      this.resetClockInForm();
      this.clockInOpen = true;
    },
    handleClockOut() {
      this.resetClockOutForm();
      this.clockOutOpen = true;
    },
    // 签到表单重置
    resetClockInForm() {
      this.clockInForm = {
        clockInLocation: "",
        remark: ""
      };
      this.resetForm("clockInForm");
    },
    // 签退表单重置
    resetClockOutForm() {
      this.clockOutForm = {
        clockOutLocation: "",
        remark: ""
      };
      this.resetForm("clockOutForm");
    },
    // 取消签到
    cancelClockIn() {
      this.clockInOpen = false;
      this.resetClockInForm();
    },
    // 取消签退
    cancelClockOut() {
      this.clockOutOpen = false;
      this.resetClockOutForm();
    },
    // 提交签到
    submitClockIn() {
      this.$refs["clockInForm"].validate(valid => {
        if (valid) {
          clockIn(this.clockInForm).then(response => {
            this.$modal.msgSuccess("签到成功");
            this.clockInOpen = false;
            this.getTodayAttendance();
          });
        }
      });
    },
    // 提交签退
    submitClockOut() {
      this.$refs["clockOutForm"].validate(valid => {
        if (valid) {
          clockOut(this.clockOutForm).then(response => {
            this.$modal.msgSuccess("签退成功");
            this.clockOutOpen = false;
            this.getTodayAttendance();
          });
        }
      });
    },
    // 重置表单
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    }
  }
};
</script>

<style scoped>
.attendance-status {
  text-align: center;
  padding: 10px 0;
}
.time-display {
  font-size: 36px;
  font-weight: bold;
  color: #409EFF;
}
.date-display {
  font-size: 16px;
  color: #606266;
  margin-bottom: 20px;
}
.clock-status {
  margin-top: 20px;
}
.status-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.status-label {
  font-weight: bold;
}
.status-text {
  margin-top: 10px;
  color: #909399;
}
</style> 